<template>
    <div>
        <!-- <ul id="standardTypes" class="standardTypesBlock flex">
            <li :class="{'active':category_id==''}" @click="category_id='';getData()">全部</li>
            <li v-for="(item) in standardCategory" :class="{'active':category_id===item.id}" @click="category_id=item.id;getData()" :key="item.id">{{item.category_name}}</li>
        </ul> -->
        <article class="standardData flex flex-wrap">
            <section class="standardItem" v-for="item in standardData" :key="item.id" @click="goto(item)">
                <div class="standardItemImg">
                    <img :src="item.covar_path" alt="">
                </div>
                <div class="standardItemDesc">
                    <p class="standardName">{{item.name}}</p>
                    <time class="standardUpdateTime">{{item.update_time}} 更新</time>
                </div>
            </section>
        </article>
    </div>
</template>
<script>
export default{
    name: 'brandstandlist',
    data(){
        return {
            category_id:'',
            standardData:[],
            keyword:''
        }
    },
    mounted(){
        this.keyword = this.$route.query.keyword
        this.getData();
    },
    watch:{
        $route:{
            handler(to,from){
                this.keyword = this.$route.query.keyword;
                this.getData();
            },
            immediate:true
        }
    },
    methods:{
        getData(){
            let that = this;
            this.$axios.get('/api/standard/list',{
                params:{
                    type:1,
                    category_id: that.category_id,
                    keyword:that.keyword
                }
            }).then((res)=>{
               that.standardData = res.data.data
            })
        },
        
        goto(item){
            this.$router.push({
                path:'/standDetail',
                query:{
                    id:item.id
                }
            })
        }
    }
}
</script>
<style scoped lang='less'>
    .standardTypesBlock{
        margin-bottom: 15px;
        position: relative;
        align-items: center;
		li{
		    font-size: 22px;
		    letter-spacing: 0;
		    margin: 0 20px;
		    cursor: pointer;
		}
		li.active{
		    color: #0064FF;
		}
        // ::after{
        //     content:'';
        //     width: 100%;
        //     height: 1px;
        //     // background: #000000;
        //     position: absolute;
        //     left: 0;
        //     bottom: 0;
        //     background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
        // }
    }


    .standardItem{
        width: 322px;
        height: 322px;
        background: #FFFFFF;
        box-shadow: 0 0 18px 0 rgba(0,0,0,0.10);
        border-radius: 10px;
        margin: 18px 34px 18px 0;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    .standardItemImg{
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        justify-content: center;
        align-items: center;
		img{
		    max-width: 100%;
		    max-height: 100%;
		}
    }
    .standardItemDesc{
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 18px;
        padding-left: 28px;
        background: #FBFBFC;
        border-radius: 0 0 9.17px 9.17px;
		.standardName{
		    font-size: 16px;
		    color: #000000;
		    letter-spacing: 0;
		    line-height: 22px;
		    opacity: 0.95;
		}
		.standardUpdateTime{
		    font-size: 12px;
		    color: rgba(0,0,0,0.30);
		    letter-spacing: 0;
		    line-height: 16.5px;
		}
    }
</style>
